<template>
  <div class="layout">
    <el-container>
      <el-header></el-header>
      <!-- 头部的组件 -->
      <el-container>
        <el-aside width="200px">
          <!-- 身体显示栏的组件 -->
          <el-menu>
            <el-menu-item
              :index="item.url"
              @click="menuClick"
              v-for="item of $store.state.menu"
              :key="item.name"
            >
              {{ item.name }}
            </el-menu-item>
            <!-- 利用：index得到需要跳转文件的后缀名，再然后将index的值带入自定义函数中，使用点击事件触发该函数获取到需要跳转文件的路径 -->
            <!-- v-for用来遍历所有选项并将其渲染在页面上 -->
            <!-- 右侧主要内容显示栏 -->
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import menus from '@/router/menu'
// 接收menu文档

export default {
  // 导出本文档
  name: 'layoutView',
  data () {
    return {
      // menus
    }
  },
  methods: {
    goto (url) {
      // 通过 this.$router.push方法可以实现页面的跳转
      // 编程式导航 通过js代码来实现跳转
      this.$router.push(url)
      // this.$router.replace(url);
      // 对应组件导航就是 <router-link replace >
    },
    menuClick (res) {
      // 代入res配置项的参数
      // console.log('res', res)
      this.$router.push(res.index)
    }
  }
}
</script>

<style scoped lang="scss">
.layout {
  width: 100vw;
  height: 100vh;
  // border: 2px solid red;
  display: flex;
  flex-direction: column;
  // box-sizing: border-box;
}
// 如果你需要修改一个 第三方组件的样式的话你怎么修改  ::v-deep通过这个内置类名来实现组件样式穿透(旧版本)
::v-deep {
  .el-menu {
    border-right: none;
    --el-menu-bg-color: rgba(180, 180, 180, 0.45);
  }

  .el-aside {
    background: rgba(180, 180, 180, 0.84);
  }
  .el-header {
    border-bottom: 1px solid rgba(180, 180, 180, 0.84);
  }
}
</style>
